<template>
  <div class="questionnaireTempInfoConfig">
    <el-form ref="form" :rules="rules" :model="form" label-width="120px" style="width: 50%">
      <el-form-item :label="$t('qualityCheck.templateName')" prop="name">
        <el-input v-model.trim="form.name" :maxlength="10"></el-input>
      </el-form-item>
      <el-form-item :label="$t('sms.tempType')">
        <el-select :disabled="true" style="width: 100%" v-model="form.type" :placeholder="$t('public.pleasePick')">
          <el-option :label="$t('configLazyLoad.questionnaireConfig.flexible')" :value="'flexible'"></el-option>
          <el-option :label="$t('configLazyLoad.questionnaireConfig.dynamic')" :value="'dynamic'"></el-option>
          <el-option :label="$t('configLazyLoad.questionnaireConfig.static')" :value="'static'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" class="primary_btn" @click="changeStatus" v-text="form.status === 'enable' ? $t('sms.stop') : $t('sms.reuse')"></el-button>
        <el-button type="primary" class="primary_btn" @click="save">{{$t('public.save')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'questionnaireTempInfoConfig',
    data () {
      return {
        form: {
          name: '',
          type: '',
          status: 'enable'
        },
        rules: {
          name: [
            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
          ]
        }
      }
    },
    props: {
      tempId: {
        type: String,
        default: ''
      }
    },
    watch: {
      tempId () {
        this.$refs.form.resetFields() // 表单重置
        this.fetchData()
      }
    },
    methods: {
      save () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$store.dispatch('updateQuestionnaireTemp', {_id: this.tempId, name: this.form.name, type: this.form.type}).then(res => {
              if (res.success) {
                this.$emit('refreshTemp')
                this.$message.success(this.$t('configLazyLoad.questionnaireConfig.editTempInfoSuc'))
                this.$store.dispatch('refreshCacheFromDb', {type: 'questionnaireTemp'})
              }
            })
          }
        })
      },
      changeStatus () {
        this.form.status = this.form.status === 'enable' ? 'disable' : 'enable'
        this.$store.dispatch('changeStatusQuestionnaireTemp', {_id: this.tempId, status: this.form.status}).then(res => {
          if (res.success) {
            this.$message.success(this.$t('configLazyLoad.questionnaireConfig.editTempInfoSuc'))
            this.$emit('refreshTemp')
          }
        })
      },
      fetchData () {
        if (this.tempId) {
          this.$store.dispatch('getQuestionnaireTempById', {_id: this.tempId}).then(res => {
            if (res.success) {
              this.form = res.data
            }
          })
        }
      }
    },
    mounted () {
      this.fetchData()
    },
    beforeMount () {
    }
  }
</script>

<style lang="stylus" scoped>
  .questionnaireTempInfoConfig
    padding-top 20px
</style>
